<template>
	<view class="scrool-page">
		<view class="header-cont">
			<view class="header-left">
				<view class="image">
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;padding-left: 30 rpx;" class="image"
						:fade-show="true" mode="aspectFill" :src=account?.avatar></image>
				</view>
				<view class="accountName">{{ account?.name }}</view>
			</view>
			<Icon style="font-size: 30px;margin-right: 20px;" icon="bi:person-add" class="icon"
				@click="toAddFriend()" />
		</view>
		<view>
			
		</view>
		<view class="list-cont">
			<uni-list>
				<uni-list :border="true" v-for="i in friendList" :key="i.id">
					<!-- 右侧带角标 -->
					<uni-list-chat :avatar-circle="true" title="uni-app" :avatar=i.friendAvatar note="[离线]">
						<view class="chat-custom-right">
							<!-- 需要使用 uni-icons 请自行引入 -->
							<uni-icons type="chat" color="#999" size="40"></uni-icons>
						</view>
					</uni-list-chat>
				</uni-list>
			</uni-list>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { ref, type Ref } from 'vue'
	import { Icon } from '@iconify/vue';
	import { request } from '@/api/request'
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import type { FriendDto } from '@/api/model/friend/FriendDto';
	import type { AccountDto } from '@/api/model/account/AccountDto';

	const token = ref('')
	const friendList : Ref<FriendDto[]> = ref([])
	const account : Ref<AccountDto | undefined> = ref();


	onLoad(() => {
		updateAccountData();
		uni.$on('accountUpdated', updateAccountData);
		findFriend()
	})

	function updateAccountData() {
		account.value = uni.getStorageSync('account');
	}

	const toAddFriend = () => {
		uni.navigateTo({
			url: '/pages/friend/find/find'

		})
	}

	const findFriend = async () => {
		const value = uni.getStorageSync('token');
		console.log('token' + token.value)
		const operation = {
			method: 'GET',
			url: `/main/friend/findFriend`,
			data: '',
			tokenRequired: true // 新增，表示是否需要token
		}
		const res = await request(operation)
		friendList.value = res.data.friend

	}
</script>


<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}

	@font-face {
		font-family: add;
		src: url('src/assets/images/addFriend.png');
	}

	.scrool-page {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.header-cont {
		width: 100%;
		height: 11%;
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-between;
		background: #F1F5FF;

		.header-left {
			margin-top: 25px;
			margin-left: 20px;
			gap: 20px;
			display: flex;
			align-items: center;

			.accountName {
				margin: 0 20 rpx;
				font-size: 30 rpx !important;
				font-family: "宋体";
			}

			.image {
				width: 100 rpx;
				height: 100 rpx;
				border-radius: 50%;
			}
		}
	}

	.list-cont {
		flex: 1;
		//margin-top: 150 rpx;
		padding-bottom: 3rem;
	}
</style>